<template>
  <div style="width:100%;height:240px;" id="hiddenAlarmPlace"></div>
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return [
         
        ];
      }
    }
  },
  data() {
    return {
      placeList: [
        {
          value: 0,
          label: "未知"
        },
        {
          value: 1,
          label: "学校"
        },
        {
          value: 2,
          label: "医院/诊所"
        },
        {
          value: 3,
          label: "商店/超市"
        },
        {
          value: 4,
          label: "餐饮场所"
        },
        {
          value: 5,
          label: "宾馆/旅馆"
        },
        {
          value: 6,
          label: "娱乐/休闲场所"
        },
        {
          value: 7,
          label: "网吧"
        },
        {
          value: 8,
          label: "美容/美发/洗浴场所"
        },
        {
          value: 9,
          label: "生产/加工企业"
        },
        {
          value: 10,
          label: "其他"
        }
      ]
    };
  },
  watch: {
    dataSource(curVal, oldVal) {
    
        this.$nextTick(() => {
      this.initEchats();
    });
    }
  },
  mounted() {
      
  },
  methods: {
    initEchats() {
      var chart = echarts.init(
        document.getElementById("hiddenAlarmPlace")
      );
       var lengendData=[];
      var seriesData=[];
       for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i];
        let palceName = this.placeList.find(v=>v.value==dataItem.shop_place).label;
        lengendData.push(palceName)
        seriesData.push( { value: dataItem.alarm_count, name: palceName })
      }
      let option = {
        color: [ "#5867dd",
          "#fd27eb",
          "#6610f2",
          "#6f42c1",
          "#e83e8c",
          "#dc3545",
            "#1dc9b7",
          "#2786fb",
          "#ffb822",
          "#fd7e14",
          "#ffc107",
          "#28a745",
          "#20c997",
          "#17a2b8",
          "#e1e1ef",
          "#007bff"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "right",
          data: lengendData
        },
        series: [
          {
            name: "重点单位分布",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            // label: {
            //   normal: {
            //     show: false,
            //     position: "center"
            //   },
            //   emphasis: {
            //     show: true,
            //     textStyle: {
            //       fontSize: "30",
            //       fontWeight: "bold"
            //     }
            //   }
            // },
            // labelLine: {
            //   normal: {
            //     show: true
            //   }
            // },
            data: seriesData
          }
        ]
      };

      chart.setOption(option);
      window.addEventListener("resize", function() {
        chart.resize();
      });
    }
  }
};
</script>
